<template>
  <view class="assessment-results-container">
    <view class="header">
      <text class="title">评估结果</text>
    </view>
    
    <view class="results-card">
      <view class="section">
        <text class="section-title">综合评分</text>
        <view class="score-container">
          <text class="score">{{ totalScore }}</text>
          <text class="score-max">/100</text>
        </view>
        <view class="health-status">
          <text>健康状态：{{ healthStatus }}</text>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">评估详情</text>
        <view class="category-item" v-for="(item, index) in assessmentDetails" :key="index">
          <text class="category-name">{{ item.name }}</text>
          <progress :percent="item.percent" stroke-width="8" color="#1890ff" />
          <text class="category-score">{{ item.score }}分</text>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">健康建议</text>
        <text class="advice-text">{{ healthAdvice }}</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="btn-primary" @click="viewDetailedReport">查看详细报告</button>
      <button class="btn-secondary" @click="backToAssessment">返回评估</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 评估结果数据
const totalScore = ref(85)
const healthStatus = ref('良好')
const assessmentDetails = ref([
  { name: '生理健康', score: 88, percent: 88 },
  { name: '心理健康', score: 82, percent: 82 },
  { name: '生活习惯', score: 75, percent: 75 },
  { name: '环境适应', score: 90, percent: 90 }
])
const healthAdvice = ref('根据您的健康评估结果，建议您保持良好的生活习惯，增加适度运动，每周至少3次30分钟以上的有氧运动。注意调节情绪，保持心理健康。饮食方面建议清淡饮食，多摄入蔬果，减少高脂高糖食物摄入。')

// 从路由获取评估结果数据
onMounted(() => {
  // 这里可以从路由参数或者API获取实际的评估结果数据
  const query = uni.getLaunchOptionsSync().query
  if (query && query.assessmentId) {
    // 获取评估数据的逻辑
    getAssessmentResults(query.assessmentId)
  }
})

// 获取评估结果的方法
const getAssessmentResults = (id) => {
  // 这里应该是实际的API调用
  console.log('获取评估ID:', id)
  // 模拟API调用
  // uni.request({...})
}

// 查看详细报告
const viewDetailedReport = () => {
  // 跳转到详细报告页面
  uni.navigateTo({
    url: '/pages/health-guide/detailed-report'
  })
}

// 返回评估页面
const backToAssessment = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.assessment-results-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  
  .header {
    margin-top: 60rpx;
    margin-bottom: 40rpx;
    text-align: center;
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .results-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    
    .section {
      margin-bottom: 40rpx;
      
      .section-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 30rpx;
        display: block;
      }
    }
    
    .score-container {
      display: flex;
      align-items: baseline;
      justify-content: center;
      margin: 20rpx 0;
      
      .score {
        font-size: 96rpx;
        font-weight: bold;
        color: #1890ff;
      }
      
      .score-max {
        font-size: 36rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
    
    .health-status {
      text-align: center;
      margin: 20rpx 0;
      font-size: 32rpx;
      color: #333;
    }
    
    .category-item {
      margin-bottom: 30rpx;
      
      .category-name {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .category-score {
        font-size: 28rpx;
        color: #666;
        margin-top: 10rpx;
        display: block;
        text-align: right;
      }
    }
    
    .advice-text {
      font-size: 30rpx;
      color: #666;
      line-height: 1.6;
    }
  }
  
  .action-buttons {
    margin-top: 60rpx;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    
    .btn-primary {
      background-color: #1890ff;
      color: white;
      border-radius: 50rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
    }
    
    .btn-secondary {
      background-color: #f0f0f0;
      color: #666;
      border-radius: 50rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
    }
  }
}
</style> 